start();
function start(){
    showData();
    add();
    btnPrimary();
    addBtnAddEvent() ;
    btnCancel();
    addEnter();
    btnEsc2();
    pagaination()
}

//为每个删除按钮，添加删除事件
$("#tbCard").on("click", ".delete", function () {
    //获取数据
    let data = getData();
    for (let i = 0; i < data.length; i++) {
      let id = $(this).attr("data-index");
      console.log(id);
      //判断
      if (data[i].id == id) {
        data.splice(i, 1);
      }
      saveData(data); //本地数据
      showData();     //渲染
      pagaination();  //分页
    }
  });
  //判断是否加载
function add() {
    if (getData().length == 0) {
      saveData(conferenceArr);
    }
  }
  //存储为本地数据
  function saveData(data) {
    sessionStorage.setItem("conferenceArr", JSON.stringify(data));
  }
  //获取本地数据
  function getData() {
    let data = sessionStorage.getItem("conferenceArr");
    if (data !== null) {
      return JSON.parse(data);
    } else {
      return [];
    }
  }
  //渲染数据
function showData() {
    let data1 = getData();
    $("#tbCard").empty();
    let fragment1 = document.createDocumentFragment();
    $.each(data1, function (i, item) {
      $("#tbCard").html = "";
      let tr = document.createElement("tr");//创建tr
      tr.innerHTML =`
         
            <td>${item.id}</td>
            <td>${item.zhuti}</td>
            <td>${item.city}</td>
            <td>${item.room}</td>
            <td>${item.roomNob}</td>
            <td>${item.openOff}</td>
            <td>
                <button id="xiugai" class="edit" data-index='${item.id}'>编辑</button>
                <button  class="delete" data-index='${item.id}'>删除</button>
            </td>
         `;
      fragment1.appendChild(tr);
    })
    $("#tbCard").append(fragment1); 
  }
//查询，搜索
function search() {
    let roomNobInput = $('#roomNob').val();//输入框
    let selects = document.getElementById('city').value; //下拉菜单
    let tbody = $('tbody')[0];
    if(roomNobInput == ""){
      return;
    }
    document.querySelector('tbody').innerHTML = '';
    let data1 = getData();
    if(selects =='全部'){
      console.log(selects);
      for (let i = 0; i < data1.length; i++) {
        if (data1[i].roomNob == roomNobInput) {
        let data1 = getData();
        let tr = '<tr><td>'+ (data1[i].id)+'</td><td>'+(data1[i].zhuti)+'</td><td>'+(data1[i].city)+'</td><td>'+ (data1[i].room) +'</td><td>'+ (data1[i].roomNob) +'</td><td>'+ (data1[i].openOff) +'</td><td><button id="xiugai" class="edit" data-index='+data1[i].id+'>编辑</button><button class="delete" data-index='+(data1[i].id)+'>删除</button></td>' +'</tr>';
        $('#tbCard').append(tr);
        }
      }
    }else{
      for (let i = 0; i < data1.length; i++) {
        if(data1[i].roomNob == roomNobInput && data1[i].city == selects){
          let data1 = getData();
          let tr = '<tr><td>'+ (data1[i].id)+'</td><td>'+(data1[i].zhuti)+'</td><td>'+(data1[i].city)+'</td><td>'+ (data1[i].room) +'</td><td>'+ (data1[i].roomNob) +'</td><td>'+ (data1[i].openOff) +'</td><td><button id="xiugai" class="edit" data-index='+data1[i].id+'>编辑</button><button class="delete" data-index='+(data1[i].id)+'>删除</button></td>' +'</tr>';
          $('#tbCard').append(tr);
        }
      }
    }
  }

//重置
function clearInput() {
    document.getElementById("roomNob").value = '';
    document.getElementById('city').selectedIndex = 0;
    getData();
    showData();
    start();
  }

  //新增
function btnPrimary(){
    let idMessage = $("#idMessage");
    let map = $('#map');
    let quyu = $('#quyu');
    let conferenceName = $('#conferenceName');
    let conferenceNameNob = $('#conferenceNameNob');
    let openType = $('#openType');
    $('#enter').click(function(){
        let data = getData();
        data.unshift({
          id: idMessage.val(),
          zhuti:map.val(),
          city:quyu.val(),
          room:conferenceName.val(),
          roomNob:conferenceNameNob.val(),
          openOff:openType.val(),
        })
        saveData(data);
        showData();
        pagaination();
      })
    }
//点击显示新增模态框
function addBtnAddEvent() {
    $("#butNew").click(function () {
      addModelShow();
    })
  }
  function addModelShow() {
    $("#idNewWeb").removeClass("hide");
    $("#idNewWeb").addClass("show");
  }
  //点击隐藏新增模态框
  function btnCancel() {
    $("#esc").click(function () {
      $("#idNewWeb").removeClass("show");
      $("#idNewWeb").addClass("hide");
    })
  }
//添加框确认按钮消失事件委托
function addEnter(){
  $("#enter").click(function(){
    addEnterCloss();
  })
}
function addEnterCloss(){
  $("#idNewWeb").removeClass("show");
  $("#idNewWeb").addClass("hide");
}

//修改
$("#tbCard").on("click","#xiugai",function(){
    let id = $(this).attr('data-index');
    $("#idNewWeb2").removeClass("hide");
    $("#idNewWeb2").addClass("show");
    $("#enter2").click(function (){
      $("#idNewWeb2").removeClass("show");
      $("#idNewWeb2").addClass("hide");
      let data = getData();
      let idMessage2 = $("#idMessage2").val();
      let map2 =  $("#map2").val();
      let quyu2 =  $("#quyu2").val();
      let conferenceName2 =  $("#conferenceName2").val();
      let conferenceNameNob2 =  $("#conferenceNameNob2").val();
      let openType2 =  $("#openType2").val();
  
      for(let i = 0; i < data.length; i++){
        if (data[i].id == id){
          data[i].id = idMessage2;
          data[i].zhuti = map2;
          data[i].city = quyu2;
          data[i].room = conferenceName2;
          data[i].roomNob = conferenceNameNob2;
          data[i].openOff = openType2;
        }
        saveData(data);
        showData();
        pagaination();
      }
    });
  });
//数据修改的模态框隐藏
function btnEsc2() {
    $("#esc2").click(function () {
      $("#idNewWeb2").removeClass("show");
      $("#idNewWeb2").addClass("hide");
    })
  }

  //分页
  function pagaination() {
    let page = 1;   //第几页
    let no = 0;
    let data1 = getData();
    let serialNumber = data1.length;  //序号
    console.log(serialNumber);
    onloude(0, 5);  //初始页面信息，第一页
    $("#pno").text(page);  //页码
    $("#nextPage").click(function () {
      if (no + 5 < serialNumber) {
        no += 5;
        page++;
        $("#pno").text(page);
        if (serialNumber >= (no + 5)) {
          onloude(no, no + 5);
        } else {
          onloude(no, serialNumber);
        }
      }
    });
    $("#lastPage").click(function () {
      if (no - 5 >= 0) {
        no -= 5;
        page--;
        $("#pno").text(page);
        onloude(no, no + 5);
        
      }
    })
  }
  function onloude(n, a) {
    document.querySelector('tbody').innerHTML = '';
    for (let i = n; i < a; i++) {
      let data1 = getData();
      let tr = '<tr><td>'+ (data1[i].id)+'</td><td>'+(data1[i].zhuti)+'</td><td>'+(data1[i].city)+'</td><td>'+ (data1[i].room) +'</td><td>'+ (data1[i].roomNob) +'</td><td>'+ (data1[i].openOff) +'</td><td><button id="xiugai" class="edit" data-index='+data1[i].id+'>编辑</button><button class="delete" data-index='+(data1[i].id)+'>删除</button></td>' +'</tr>';
      $('#tbCard').append(tr);
      // saveData(data);
    }
  }

